import  Pipeline from '../../Pipeline'
import { PlusOutlined } from '@ant-design/icons';
import { Button } from 'antd';
import { TaskContent } from './components/task-content';

const APP=() => (
  <Pipeline style={{ margin: 20 }}>
    <Pipeline.Stage
      name="stage-0"
      title="配置校验"
      tooltip="帮助提示"
      extra={<Button type="text" icon={<PlusOutlined />} />}
    >
      <Pipeline.Task
        name="task-0"
        title="提交申请"
        status="success"
        onClick={() => {
          console.log('click!');
        }}
        extra={
          <Button size="small" type="text" onClick={(e) => e.stopPropagation()}>
            action
          </Button>
        }
        lineTo={['task-1', 'task-2']}
      >
        <TaskContent />
      </Pipeline.Task>
    </Pipeline.Stage>

    <Pipeline.Stage name="stage-1" title="多并行任务" status="wait">
      <Pipeline.Task name="task-0" title="任务名称" status="wait" lineTo={['task-0']} />
      <Pipeline.Task
        name="task-1"
        title="应用 Owner 审批"
        status="process"
        percent={40}
        description="1 天 3 小时"
        lineTo={['task-0']}
        defaultExpanded
      >
        <TaskContent />
      </Pipeline.Task>
      <Pipeline.Task
        name="task-2"
        title="任务名称"
        status="error"
        description="不通过 2020-02-03 12:00"
        lineTo={['task-1']}
      />
    </Pipeline.Stage>

    <Pipeline.Stage name="stage-2" title="阶段名称">
      <Pipeline.Task
        name="task-0"
        title="任务名称"
        status="process"
        percent={68}
        description="2 天 4 小时"
        lineTo={['task-0']}
      />
      <Pipeline.Task
        name="task-1"
        title="任务名称"
        status="wait"
        description="1 天 3 小时"
        extra="action"
        lineTo={['task-0']}
      />
    </Pipeline.Stage>

    <Pipeline.Stage name="stage-3" title="阶段名称" status="wait">
      <Pipeline.Task name="task-0" title="任务名称" status="wait" description="2 天 4 小时" />
    </Pipeline.Stage>
  </Pipeline>
);

export default APP;